<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学子首页F1F2布局</title>
    <link rel="stylesheet" href="p6.css">
</head>

<body>
    <div class="top">
        <div class="contain">
            <div class="up">
                <div class="up-left">
                    <div class="up-left-left">
                        <p class="p1">灵越 燃7000系列</p>
                        <p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存
                            英特尔HD显卡620含共享显卡内存</p>
                        <p class="p3">￥4999</p>
                        <a href="#"><p class="p4">查看详情</p></a>
                        <img class="img1" src="img/computer1.png" alt="">
                    </div>
                </div>
                <div class="up-right">
                    <div class="content">
                        <p class="p1">颜值 框不住</p>
                        <p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存
                            英特尔HD显卡620含共享显卡内存</p>
                        <p class="p3">￥6888.00</p>
                        <a href="#"><p class="p4">查看详情</p></a>
                        <img class="img2" src="img/computer2.png" alt="">
                    </div>
                </div>
            </div>
            <div class="down">
                <div class="down-left">
                    <div class="down-left-top">
                        <img src="img/icon.png" alt="">
                        <span style="line-height: 35px">电脑，办公/1F</span>
                    </div>
                    <div class="item-all">
                        <p>电脑整机</p>
                        <ul>
                            <li><a href="#">笔记本</a></li>
                            <li><a href="#">游戏机</a></li>
                            <li><a href="#">台式机</a></li>
                            <li><a href="#">一体机</a></li>
                            <li><a href="#">服务器</a></li>
                            <li><a href="#">联想</a></li>
                        </ul>
                        <p>电脑配置</p>
                        <ul>
                            <li><a href="#">CPU</a></li>
                            <li><a href="#">SSD硬盘</a></li>
                            <li><a href="#">显示器</a></li>
                            <li><a href="#">显卡</a></li>
                            <li><a href="#">组装电脑</a></li>
                            <li><a href="#">机箱</a></li>
                        </ul>
                        <p>外设/游戏</p>
                        <ul>
                            <li><a href="#">键盘</a></li>
                            <li><a href="#">鼠标</a></li>
                            <li><a href="#">U盘</a></li>
                            <li><a href="#">移动硬盘</a></li>
                            <li><a href="#">游戏设备</a></li>
                            <li><a href="#">智能单车</a></li>
                        </ul>
                    </div>
                </div>
                <div class="down-right">
                    <div class="rightbox">
                        <img src="img/computer3.png">
                        <p class="p5">戴尔(DELL)XPS13-9360-R1609 13.3英
                            寸微边框笔记本电脑</p>
                        <p class="p6">￥4600.00</p>
                        <a href="#"><p>查看详情</p></a>
                    </div>
                    <div class="rightbox box2">
                        <img src="img/computer4.png">
                        <p class="p5">14.8mm超轻薄笔记本电脑 航海王版
                            13.3英寸微边框笔记本电脑</p>
                        <p class="p6">￥5600.00</p>
                        <a href="#"><p>查看详情</p></a>
                    </div>
                    <div class="rightbox">
                        <img src="img/computer4.png">
                        <p class="p5">14.8mm超轻薄笔记本电脑 航海王版
                            13.3英寸微边框笔记本电脑</p>
                        <p class="p6">￥5600.00</p>
                        <a href="#"><p>查看详情</p></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>